<script setup>
import { ref, computed, toRefs, onUpdated } from "vue";
import { computedAsync } from '@vueuse/core'
import { useClipboard } from '@vueuse/core'
import { View } from "pack-vditor"
import ThinkEl from "./think.vue"
import {getMessage} from "../utils/db"
const props = defineProps(["main", "id", "index","row","total","current"])
const { main, index, id } = props;
const { copy, copied, isSupported } = useClipboard()

const {row,total,current} = toRefs(props)
// const id = ref(data.id)
// const row = computedAsync(async () => {
//     if(main.chatData.mid === data.id){
//         return main.chatData;
//     }else{
//         return await getMessage(data.id)   
//     }
// })
//
// const current = computed(() => data.list.indexOf(id))
// const total = computed(() => data.list.length);
// const cd = computed(() => main.chatData.mid == data.id ? main.chatData : td.value)

const think = computed(() => row.value?.thinking_content)
const content = computed(() => {
    // console.log('.........', td.value)
    return row.value?.content;
})
const thinkTime = computed(() => row.value?.thinking_elapsed_secs || '')
const thinkLoading = computed(() => row.value?.thinkLoading)
const contentLoading = computed(() => row.value?.contentLoading)

const isLike = ref(row.value?.isLike)
const comment = ref(!!row.value?.comment);
const commentRef = ref();

onUpdated(() => {
    // console.log('robot ==========>', data, main.chatData, td.value,thinkLoading.value)
})


//
const handleLeft = () => {
    const i = data.list.indexOf(id.value)
    if (i > 0) {
        // main.upMsgsId(index, current.value - 1)
        id.value = data.list[i - 1]
        // refresh();
    }
}

const handleRight = () => {
    const i = data.list.indexOf(id.value)
    if (i + 1 < total.value) {
        // main.upMsgsId(index, current.value + 1)
        id.value = data.list[i + 1]
        refresh();
    }
}

const handleRechat = async () => {
    const {parent_id,id} = row.value;
    const rd = await main.prep(parent_id,id)
    main.chat(rd)
    refresh();
}

const handleToggleLike = () => {
    isLike.value = !isLike.value;
    main.userLike(row.value,isLike.value)
}

const handleOpenComment = () => {
    main.commentDialog.value = true;
}
const handleComment = () => {
    const text = commentRef.value.value;
    if(text){
        handleToggleComment(true,text)
    }else{
        handleToggleComment(false)
    }
    main.commentDialog.value = false;
}
const handleToggleComment = (bool = !comment.value,text) => {
    isLike.value = false;
    comment.value = bool;
    
    main.userComment(row.value,bool,text)
}

</script>

<template>
    <div class="flex max-w-full gap-10 max-w-full">
        <div class="p-6 rd-4 h-fit text-24">
            <div class="i-fluent-emoji:robot"></div>
        </div>
        <div class="max-w-90% overflow-hidden">
            <div v-show="think || content" class="bg-#93d2f355 p-6 rd-8">
                <!-- think -->
                <div v-if="think || thinkLoading">
                    <ThinkEl :main="main" :content="think" :loading="thinkLoading" :time="thinkTime"></ThinkEl>
                </div>
                <!-- content -->
                <div v-if="content" class="c-#333 bg-#ffffff88 p-4 rd-4 mb-4 mt-10 text-12">
                    <View :value="content"></View>
                </div>
            </div>


            <!-- operates -->
            <div v-if="!thinkLoading && !contentLoading" class="flex gap-20 items-center justify-between">
                <div class="flex items-center gap-5 text-14 p-x-6">
                    <div v-show="copied" class="i-lucide:copy-check c-#67C23A" title="已复制"></div>
                    <div v-show="!copied" class="i-si:copy-duotone  cursor-pointer op-80 hover-op-100" title="复制"
                        @click="isSupported && copy(content)"></div>
                    <div class="i-solar:repeat-one-minimalistic-bold-duotone c-#67C23A cursor-pointer op-80 hover-op-100" title="重新生成" @click="handleRechat"></div>
                    <div v-if="!isLike" class="i-heroicons:hand-thumb-up c-#409EFF cursor-pointer op-80 hover-op-100" title="点赞" @click="handleToggleLike" ></div>
                    <div v-else class="i-heroicons:hand-thumb-up-solid c-#409EFF cursor-pointer op-80 hover-op-100" title="取消点赞" @click="handleToggleLike"></div>
                    <div v-if="!comment" class="i-heroicons:hand-thumb-down c-#999 cursor-pointer op-80 hover-op-100" title="点踩" @click="handleOpenComment"></div>
                    <div v-else class="i-heroicons:hand-thumb-down-solid c-#999 cursor-pointer op-80 hover-op-100" title="取消点踩" @click="handleToggleComment(false)"></div>

                    <div>{{  }}</div>
                </div>
                <div v-if="total > 1" class="flex items-center">
                    <div :class="['i-mingcute:left-line c-#666 cursor-pointer op-80 hover-op-100', { 'c-#ddd': current == 0 }]"
                        @click="handleLeft"></div>
                    <div class="text-10 c-#999">{{ current + 1 }} / {{ total }}</div>
                    <div :class="['i-icon-park-outline:right c-#666 cursor-pointer op-80 hover-op-100', { 'c-#ddd': current == total - 1 }]"
                        @click="handleRight"></div>
                </div>
            </div>
        </div>

        <div v-if="main.commentDialog.value" class="fixed top-0 left-0 flex justify-center items-center  w-100vw h-100vh bg-#00000022">
            <div class="w-40vw h-40vh min-h-320px bg-#fff shadow-md rd-8 flex flex-col">
                <div class="w-full flex justify-between items-center p-10 box-border ">
                    <span class="text-12">反馈</span>
                    <div @click="main.commentDialog.value = false" class="cursor-pointer op-70 hover-op-100 hover-bg-#f0f0f0 rd-4">
                        <div  class="i-iconamoon:close-bold c-#999 "></div>
                    </div>
                    
                </div>
                <div class="w-full p-x-10 pb-10 box-border flex-1 overflow-hidden flex flex-col gap-4">
                    <div class="w-full flex text-10 gap-4">
                        <template v-for="d in main.defaultComments">
                            <div class="bg-#f0f0f0 p-y-2 p-x-4 rd-4 cursor-pointer op-70 hover-op-100" @click="commentRef.value = d">{{ d }}</div>
                        </template>
                    </div>
                    <div class="w-full flex-1 overflow-hidden">
                        <textarea ref="commentRef" class="w-full h-full b-none outline-none bg-#f0f0f0 resize-none rd-4 p-4 box-border"></textarea>
                    </div>
                    <div class="flex justify-end items-center gap-6 text-10">
                        <div @click="main.commentDialog.value = false" class="bg-#ddd c-#333 p-y-2 p-x-4 rd-4 cursor-pointer op-70 hover-op-100">取消</div>
                        <div @click="handleComment" class="bg-#409EFF c-#fff p-y-2 p-x-4 rd-4 cursor-pointer op-70 hover-op-100">提交</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>